<script lang="tsx" setup>
import LeftTitle from '@/components/basic/LeftTitle.vue'
import { onBeforeUnmount, onMounted, ref, nextTick, shallowRef } from 'vue'
import { queryBatteryClassificationProportion, queryBatteryInfo } from '@/api/info/index'
import { getToken } from '@/utils/cache/cookies'
import DataTitle from '@/components/basic/DataTitle.vue'
import BatteryState from '@/components/basic/BatteryState.vue'
import { Column, ElMessage, ElProgress } from 'element-plus'
import dayjs from 'dayjs'
import BorderBox2 from '@/components/basic/BorderBox2.vue'
import AbnormalBattery from '@/assets/images/ic-abnormal-battery.png'
import AlarmBattery from '@/assets/images/ic-alarm-battery.png'
import NormalBattery from '@/assets/images/ic-normal-battery.png'
import EnvirImg from '@/assets/images/environmentTemperature.png'
import MosImg from '@/assets/images/mosTemperature.png'
import BatteryEnvir from '@/assets/images/batteryTemperature.png'
import SingleVoltageImg from '@/assets/images/ic-single-voltage.png'
import { ChargeDischarge } from '@/api/info/index'
import {
  batteryAlarmType,
  batteryBasicInfoType,
  batteryData,
  batteryHeadType,
  ChargeDischargeType,
  chargeSwitchType,
  dischargeSwitchType,
  queryBatteryClassificationProportionResponseData,
} from '@/api/info/types/info'
import BorderBox3 from '@/components/basic/BorderBox3.vue'
import { PieChartData } from '@/types'
import * as echarts from 'echarts'
import { useRoute } from 'vue-router'
import { Alignment } from 'element-plus/es/components/table-v2/src/constants.mjs'
const route = useRoute()
const battery = ref<batteryData[]>([])
const batteryTotal = ref<number>(0)

const produceId = ref<string>(route.query.produceId as string)
const batteryTotalLoading = ref<boolean>(false)
// const router = useRouter()
const getBatteryData = async () => {
  try {
    batteryTotalLoading.value = true
    const res = await queryBatteryClassificationProportion({
      token: getToken() ?? '',
      produceId: produceId.value,
      channel: 'Service',
      type: (route.query.type as string) || '1',
    })
    if (res.resultCode === 0) {
      battery.value = res.resultData.battery
      batteryTotal.value = res.resultData.totalBattery
      getChartData(res.resultData)
    }
    batteryTotalLoading.value = false
  } catch (error) {
    console.error(error)
    batteryTotalLoading.value = false
  }
}
const showInfo = ref<boolean>(false)
/** 电池详情数据 */
const showBatteryData = ref<batteryHeadType | null>(null)
const showBasicData = ref<batteryBasicInfoType | null>(null)
const showAlarmData = ref<batteryAlarmType | null>(null)
// 电池温度
const batteryTemperature = ref<string>('')
// 功率管温度
const mosTemperature = ref<string>('')
// 箱内温度
const environmentTemperature = ref<string>('')
//最高单体电压
const maxMonomerVoltage = ref<string>('')
// 最低单体电压
const minMonomerVoltage = ref<string>('')
//单体电压压差
const voltageDifference = ref<string>('')
/** 电压列表 */
const voltList = ref<string[]>([])
const VoltageListData = ref<any>(null)
/** 报警信息 */
interface AlarmType {
  label: string
  value: string
  color: string
}
const AlarmData = ref<AlarmType[]>([])
/** 电池信息更新时间 */
const time = ref<string>('')
const timer = ref<any>(0)
/** 请求数据 */
const getBatteryInfoData = async () => {
  try {
    const res = await queryBatteryInfo({
      produceId: produceId.value,
      channel: 'Service',
      token: getToken() ?? '',
      type: route.query.infoType as string,
    })
    if (res.resultCode === 0) {
      showBatteryData.value = res.resultData.batteryHead
      showBasicData.value = res.resultData.batteryBasicInfo
      batteryTemperature.value = res.resultData.batteryChart.batteryTemperature
      mosTemperature.value = res.resultData.batteryChart.mosTemperature
      environmentTemperature.value = res.resultData.batteryChart.environmentTemperature
      maxMonomerVoltage.value = res.resultData.batteryChart.maxMonomerVoltage
      minMonomerVoltage.value = res.resultData.batteryChart.minMonomerVoltage
      voltageDifference.value = res.resultData.batteryChart.voltageDifference
      voltList.value = res.resultData.batteryChart.voltList
      VoltageListData.value = formatVoltageList(voltList.value)
      batteryLineChartsData.value = res.resultData.batteryChart.getRealtimeDataset
      showAlarmData.value = res.resultData.batteryAlarm
      updateAlarmData()
      time.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
      showInfo.value = true
      nextTick(() => {
        initLineEcharts()
      })
      timer.value = setTimeout(() => {
        getBatteryInfoData()
      }, 60000)
    }
  } catch (error) {
    console.error(error)
    showInfo.value = false
  }
}
const getChartData = (res: queryBatteryClassificationProportionResponseData) => {
  totalChartData.value = mapStoreDataToPieDataset(
    res.normalBattery,
    res.abnormalBattery,
    res.alarmBattery,
  )
  setChartsData()
  BatteryTotalCharts.value?.hideLoading()
}
const totalChartData = ref<PieChartData[]>([])
const BatteryTotalCharts = shallowRef<echarts.ECharts | null>(null)
const initBatteryTotalCharts = () => {
  if (BatteryTotalCharts.value !== null && BatteryTotalCharts.value !== undefined) {
    BatteryTotalCharts.value.dispose()
  }
  const chartDom = document.getElementById('battery-total-chart')
  BatteryTotalCharts.value = echarts.init(chartDom)
  BatteryTotalCharts.value?.showLoading('default', {
    text: '加载中',
    color: '#fff',
    textColor: '#fff',
    maskColor: 'transparent',
    zlevel: 0,
    // 字体大小。从 `v4.8.0` 开始支持。
    fontSize: 28,
    // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
    showSpinner: true,
    // 字体粗细。从 `v5.0.1` 开始支持。
    fontWeight: 'bold',
  })
  window.onresize = () => {
    BatteryTotalCharts.value?.resize()
  }
}
const setChartsData = () => {
  const option = {
    series: [
      {
        type: 'pie',
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          opacity: 0.7,
        },
        radius: ['25%', '35%'],
        data: totalChartData.value,
        emphasis: {
          disabled: true,
        },
        selectedMode: false,
      },
      {
        type: 'pie',
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          color: '#000',
          opacity: 0.3,
        },
        radius: ['33%', '35%'],
        data: totalChartData.value,
        emphasis: {
          disabled: true,
        },
        selectedMode: false,
      },
      {
        type: 'pie',
        radius: ['35%', '60%'],
        minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
        avoidLabelOverlap: true, //是否启用防止标签重叠策略
        labelLine: {
          length: 50,
          length2: 50,
          show: true,
          lineStyle: {
            width: 2,
          },
        },
        label: {
          alignTo: 'labelLine',
          position: 'outside',
          formatter: ['{bx|{b}}', '{dx|{d}%}'].join('\n'),
          rich: {
            bx: {
              fontSize: 24,
              fontWeight: 500,
              color: '#FFF',
              padding: [10, 10, 10, 10],
            },
            dx: {
              fontSize: 30,
              fontWeight: 600,
              color: '#FFF',
              padding: [10, 10, 10, 10],
            },
          },
        },
        data: totalChartData.value,
      },
    ],
    legend: {
      show: true,
      bottom: 0,
      left: '20%',
      textStyle: {
        color: '#fff',
        fontSize: 20,
        rich: {
          value: {
            fontWeight: 'bold',
            fontSize: 25,
            lineHeight: 25,
            padding: [20, 5, 5, 5],
          },
          name: {
            fontWeight: 'normal',
            fontSize: 20,
            lineHeight: 20,
          },
        },
      },
      formatter: (name: string) => {
        let data = option.series[2].data
        const item = data.find((item) => item.name === name)
        console.log(item)
        return `{name|${name}}` + '\n' + `{value|${item?.value}}`
      },
      itemGap: 20,
      itemHeight: 25,
      itemWidth: 25,

      data: [
        {
          name: '正常电池',
          icon: 'image://' + NormalBattery,
        },
        {
          name: '告警电池',
          icon: 'image://' + AlarmBattery,
        },
        {
          name: '异常电池',
          icon: 'image://' + AbnormalBattery,
        },
      ],
    },
  }
  BatteryTotalCharts.value?.setOption(option)
}
/** 最新两小时数据的echarts */
const BatteryLineCharts = shallowRef<echarts.ECharts | null>(null)
const batteryLineChartsData = ref<string[][]>([])
const initLineEcharts = async () => {
  if (BatteryLineCharts.value !== null && BatteryLineCharts.value !== undefined) {
    BatteryLineCharts.value.dispose()
  }
  const batteryDom = document.getElementById('latest-data')
  BatteryLineCharts.value = echarts.init(batteryDom)
  BatteryLineCharts.value?.showLoading('default', {
    text: '加载中',
    color: '#fff',
    textColor: '#fff',
    maskColor: 'transparent',
    zlevel: 0,
    // 字体大小。从 `v4.8.0` 开始支持。
    fontSize: 28,
    // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
    showSpinner: true,
    // 字体粗细。从 `v5.0.1` 开始支持。
    fontWeight: 'bold',
  })
  window.onresize = () => {
    BatteryLineCharts.value?.resize()
  }
  setChartsLineData()
}

const setChartsLineData = () => {
  const ChartsData: echarts.EChartsCoreOption = {
    dataset: {
      source: batteryLineChartsData.value,
    },
    color: ['#0DB9BA', '#27EEA0', '#FFCB31'],
    xAxis: {
      type: 'category',
      axisLabel: {
        color: 'white',
        fontSize: 24,
        formatter: function (value: any) {
          return dayjs(value).format('HH:mm')
        },
      },
      axisLine: {
        lineStyle: {
          color: '#ffffff0c',
          width: 2,
        },
      },
    },
    legend: {
      top: 10,
      right: 50,
      textStyle: {
        color: '#fff',
        fontSize: 30,
      },
      itemGap: 30,
      itemWidth: 50,
    },
    tooltip: {
      show: true,
      confine: true,
      className: 'tooltip-custom',
      position: 'top',
      formatter: function (params: any) {
        const index = params.encode.y[0]
        const value = params.value[index]
        return `<div class="tooltip-custom-content ${index === 1 ? 'tooltip-0' : index === 2 ? 'tooltip-1' : 'tooltip-2'}">
                <span>${value}</span>
                </div>`
      },
    },
    yAxis: {
      axisLabel: {
        color: 'white',
        fontSize: 24,
        margin: 20,
      },
      splitLine: {
        show: false,
      },
      splitArea: {
        show: true,
        color: '#FFF',
        opacity: 0.05,
      },
    },
    series: [
      {
        type: 'line',
      },
      {
        type: 'line',
      },
      {
        type: 'line',
      },
    ],
  }
  BatteryLineCharts.value?.setOption(ChartsData)
  BatteryLineCharts.value?.hideLoading()
}

const updateAlarmData = () => {
  AlarmData.value = [
    {
      label: '均衡告警状态',
      value: formatAlarmStatus(showAlarmData.value?.equilibriumStatus),
      color: formatAlarmColor(showAlarmData.value?.equilibriumStatus),
    },
    {
      label: '电池温度告警',
      value: formatAlarmStatus(showAlarmData.value?.batteryTemperatureStatus),
      color: formatAlarmColor(showAlarmData.value?.batteryTemperatureStatus),
    },
    {
      label: '电芯过放告警',
      value: formatAlarmStatus(showAlarmData.value?.cellOverDischargeStatus),
      color: formatAlarmColor(showAlarmData.value?.cellOverDischargeStatus),
    },
    {
      label: '总压过放告警',
      value: formatAlarmStatus(showAlarmData.value?.voltageOverDischargeStatus),
      color: formatAlarmColor(showAlarmData.value?.voltageOverDischargeStatus),
    },

    {
      label: '电芯过压告警',
      value: formatAlarmStatus(showAlarmData.value?.cellOverVoltageStatus),
      color: formatAlarmColor(showAlarmData.value?.cellOverVoltageStatus),
    },
    {
      label: '总压过压告警',
      value: formatAlarmStatus(showAlarmData.value?.voltageOverVoltageStatus),
      color: formatAlarmColor(showAlarmData.value?.voltageOverVoltageStatus),
    },
    {
      label: '放电过流告警',
      value: formatAlarmStatus(showAlarmData.value?.dischargeOverCurrentStatus),
      color: formatAlarmColor(showAlarmData.value?.dischargeOverCurrentStatus),
    },
    {
      label: '充电过流告警',
      value: formatAlarmStatus(showAlarmData.value?.chargeOverCurrentStatus),
      color: formatAlarmColor(showAlarmData.value?.chargeOverCurrentStatus),
    },
    {
      label: '放电过温告警',
      value: formatAlarmStatus(showAlarmData.value?.dischargeOverTemperatureStatus),
      color: formatAlarmColor(showAlarmData.value?.dischargeOverTemperatureStatus),
    },
    {
      label: '充电过温告警',
      value: formatAlarmStatus(showAlarmData.value?.chargeOverTemperatureStatus),
      color: formatAlarmColor(showAlarmData.value?.chargeOverTemperatureStatus),
    },
    {
      label: '环境高温告警',
      value: formatAlarmStatus(showAlarmData.value?.environmentHighTemperatureStatus),
      color: formatAlarmColor(showAlarmData.value?.environmentHighTemperatureStatus),
    },
    {
      label: '环境低温告警',
      value: formatAlarmStatus(showAlarmData.value?.environmentLowTemperatureStatus),
      color: formatAlarmColor(showAlarmData.value?.environmentLowTemperatureStatus),
    },
    {
      label: 'MOS过温告警',
      value: formatAlarmStatus(showAlarmData.value?.mosTemperatureStatus),
      color: formatAlarmColor(showAlarmData.value?.mosTemperatureStatus),
    },
    {
      label: 'SOC低告警',
      value: formatAlarmStatus(showAlarmData.value?.socLowStatus),
      color: formatAlarmColor(showAlarmData.value?.socLowStatus),
    },
  ]
}
const handleChangeSwitch = async (value: string | number | boolean, type: string) => {
  try {
    const data = formatChangeType(type, value as string)
    const res = await ChargeDischarge({
      produceId: produceId.value,
      channel: 'Service',
      type: data as ChargeDischargeType,
      productType: route.query.infoType as string,
    })
    if (res.resultCode === 0) {
      ElMessage.success(res.resultMessage)
      if (type === '充电MOS') {
        showBatteryData.value!.chargeSwitch = value as chargeSwitchType
      } else {
        showBatteryData.value!.dischargeSwitch = value as dischargeSwitchType
      }
    }
  } catch (error) {
    console.error(error)
  }
}
const getTableCol: () => Column<any>[] = () => {
  return [
    {
      key: 'battery-info-serialNumber',
      dataKey: 'serialNumber',
      title: '序号',
      width: 200,
      align: Alignment.CENTER,
    },
    {
      key: 'battery-info-batteryLockId',
      dataKey: 'batteryLockId',
      title: '电池中控',
      width: 200,
      align: Alignment.CENTER,
    },
    {
      key: 'battery-info-storeName',
      dataKey: 'storeName',
      title: '所属站点',
      width: 250,
      align: Alignment.CENTER,
    },
    {
      key: 'battery-info-info',
      title: '电池详情',
      dataKey: 'batteryLockId',
      width: 250,
      align: Alignment.CENTER,
      cellRenderer: ({ cellData: data }) => (
        <span class="color-[#CFCFCF] cursor-pointer" onClick={() => changeBatteryInfo(data)}>
          查看
        </span>
      ),
    },
  ]
}
/** 查看电池详情 */
const changeBatteryInfo = (batteryLockId: string) => {
  produceId.value = batteryLockId
  if (timer.value) clearTimeout(timer.value)
  getBatteryInfoData()
}
/** 辅助函数 */
const formatVoltageList = (list: string[]) => {
  const numberList = list.map((item) => Number(item))
  const maxMonomerVoltage = Math.max(...numberList)
  const minMonomerVoltage = Math.min(...numberList)
  const maxIndex = numberList.indexOf(maxMonomerVoltage)
  const minIndex = numberList.indexOf(minMonomerVoltage)
  return list.map((item, index) => {
    return {
      value: item,
      color: index === maxIndex ? '#8DD3B5' : index === minIndex ? '#F89487' : '',
    }
  })
}
const formatAlarmStatus = (status: string | undefined) => {
  return status === '0' ? '正常' : status === '1' ? '异常' : '正常'
}
const formatAlarmColor = (status: string | undefined) => {
  return status === '0' ? '#8DD3B5' : status === '1' ? '#FF676A' : '#8DD3B5'
}
const formatBatteryStatus = (status: string | undefined) => {
  return status === '5'
    ? '搁置'
    : status === '3'
      ? '震动'
      : status === '4'
        ? '静止'
        : status === '6'
          ? '移动'
          : ''
}
const formatChangeType = (type: string, value: string): ChargeDischargeType => {
  if (type === '充电MOS') {
    if (value === '1') {
      return 'chargeMosOpen'
    } else {
      return 'chargeMosShut'
    }
  } else {
    if (type === '1') {
      return 'dischargeMosOpen'
    } else {
      return 'dischargeMosShut'
    }
  }
}
/**
 * 将电池占比转换为 ECharts 饼状图数据格式
 * @param normalTotal - 正常站点总数
 * @param abnormalTotal - 异常站点总数
 * @returns ECharts 饼状图所需的 dataset 格式数据
 */
const mapStoreDataToPieDataset = (t1: number, t2: number, t3: number) => {
  return [
    { name: '正常电池', value: t1, color: '#65FFB4', inColor: 'rgba(101,255,180,0.7)' },
    { name: '异常电池', value: t2, color: '#FF843B', inColor: 'rgba(255,132,59,0.7)' },
    { name: '告警电池', value: t3, color: '#FF676A', inColor: 'rgba(255,103,106,0.7)' },
  ]
}
onMounted(() => {
  initBatteryTotalCharts()
  getBatteryData()
  // if (type.value === '2') return
  getBatteryInfoData()
})
onBeforeUnmount(() => {
  if (timer.value) clearTimeout(timer.value)
  BatteryLineCharts.value?.clear()
  BatteryTotalCharts.value?.clear()
})
</script>

<template>
  <div class="battery-info">
    <div class="battery-info__left">
      <left-title />
      <div flex flex-col mt-50 rounded-10 p-20 class="bg-[#ffffff0c]">
        <div flex flex-col>
          <data-title title="电池分类占比" eg-title="BATTERY INSPECTION OVERVIEW" />
          <div id="battery-total-chart" p-20 w-full h-700 box-border />
        </div>
      </div>
      <div flex flex-col mt-50 flex-1 class="bg-[#081530]">
        <data-title
          :title="'电池总数(' + batteryTotal + ')'"
          eg-title="BATTERY INSPECTION OVERVIEW"
        />
        <div mt-20 flex-1 pb-20>
          <el-auto-resizer>
            <template #default="{ height, width }">
              <el-table-v2
                header-class="battery-data-header"
                :columns="getTableCol()"
                :data="battery"
                :width="width"
                :height="height"
                :header-height="80"
                :row-height="80"
                :fixed="true"
              />
            </template>
          </el-auto-resizer>
        </div>
      </div>
    </div>
    <div class="battery-info__right">
      <div class="battery-info-container">
        <border-box3 flex-1>
          <data-title title="更新时间" :tip="time" eg-title="" />
          <div flex w-full h-full>
            <div class="w-[50%] h-full flex flex-col">
              <div class="w-full h-[50%] items-center justify-center flex flex-col">
                <battery-state :-soc="showBatteryData?.soc" mt />
                <div flex items-center class="w-[80%]" mt-36 mb-36 color-white>
                  <span class="text-[28px] color-white mr-20">SOH:</span>
                  <el-progress
                    flex-1
                    :percentage="showBatteryData?.soh ? +showBatteryData?.soh : 0"
                    :stroke-width="20"
                    color="#64FFB4"
                  >
                    <template #default="{ percentage }">
                      <span color-white class="text-[28px] ml-20">{{ percentage }}%</span>
                    </template>
                  </el-progress>
                </div>
              </div>
              <div class="w-full h-[50%] flex flex-col">
                <el-descriptions mb-20>
                  <el-descriptions-item label="电池编号:">{{
                    showBatteryData?.batteryNumber
                  }}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions mb-20>
                  <el-descriptions-item label="充电MOS:">
                    <el-switch
                      v-if="showBatteryData?.chargeSwitch"
                      v-model="showBatteryData.chargeSwitch"
                      active-value="1"
                      inactive-value="0"
                      class="ml-2"
                      size="large"
                      style="--el-switch-on-color: #45aaff; --el-switch-off-color: transparent"
                      z-2
                      @change="handleChangeSwitch($event, '充电MOS')"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="放电MOS:">
                    <el-switch
                      v-if="showBatteryData?.dischargeSwitch"
                      v-model="showBatteryData.dischargeSwitch"
                      active-value="1"
                      inactive-value="0"
                      class="ml-2"
                      size="large"
                      @change="handleChangeSwitch($event, '放电MOS')"
                      z-2
                      style="--el-switch-on-color: #45aaff; --el-switch-off-color: transparent"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="电池状态:">
                    <el-tag size="large" color="rgba(138, 222, 222, 0.70)" class="color-white">
                      {{ formatBatteryStatus(showBasicData?.batteryStatus) }}
                    </el-tag>
                  </el-descriptions-item>
                </el-descriptions>
                <el-descriptions mb-20>
                  <el-descriptions-item label="当前电流:">
                    <border-box2
                      center="center"
                      display="inline-flex"
                      bg="linear-gradient( 270deg, #132239 0%, #1B75FF 51%, rgba(19,34,57,0.22) 100%)"
                      width="150px"
                      height="80px"
                      >{{ showBatteryData?.electricCurrent }} A</border-box2
                    >
                  </el-descriptions-item>
                  <el-descriptions-item label="标称容量:">
                    <border-box2
                      center="center"
                      display="inline-flex"
                      bg="linear-gradient( 270deg, #132239 0%, #1B75FF 51%, rgba(19,34,57,0.22) 100%)"
                      width="150px"
                      height="80px"
                      >{{ showBatteryData?.designCapacity }}Ah</border-box2
                    >
                  </el-descriptions-item>
                  <el-descriptions-item label="剩余容量:">
                    <border-box2
                      center="center"
                      display="inline-flex"
                      bg="linear-gradient( 270deg, #132239 0%, #1B75FF 51%, rgba(19,34,57,0.22) 100%)"
                      width="150px"
                      height="80px"
                      >{{ showBatteryData?.residualCapacity }}Ah</border-box2
                    >
                  </el-descriptions-item>
                </el-descriptions>
                <el-descriptions mb-20>
                  <el-descriptions-item label="当前功率:">
                    <border-box2
                      center="center"
                      display="inline-flex"
                      bg="linear-gradient( 270deg, #132239 0%, #1B75FF 51%, rgba(19,34,57,0.22) 100%)"
                      width="150px"
                      height="80px"
                      >{{ showBatteryData?.power }} W</border-box2
                    >
                  </el-descriptions-item>
                  <el-descriptions-item label="当前电压:">
                    <border-box2
                      center="center"
                      display="inline-flex"
                      bg="linear-gradient( 270deg, #132239 0%, #1B75FF 51%, rgba(19,34,57,0.22) 100%)"
                      width="150px"
                      height="80px"
                      >{{ showBatteryData?.voltage }}V</border-box2
                    >
                  </el-descriptions-item>
                  <el-descriptions-item label="循环次数:">
                    <border-box2
                      center="center"
                      display="inline-flex"
                      bg="linear-gradient( 270deg, #132239 0%, #1B75FF 51%, rgba(19,34,57,0.22) 100%)"
                      width="150px"
                      height="80px"
                      >{{ showBatteryData?.loopCount }}</border-box2
                    >
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
            <div class="flex-1 h-full flex flex-col ml-50">
              <div class="w-full h-[50%]" id="latest-data" />
              <div class="flex-1">
                <div grid grid-cols-3 grid-rows-1 content-center justify-items-center>
                  <div flex items-center>
                    <img :src="EnvirImg" />
                    <div flex flex-col class="text-[28px] color-[#FFF]">
                      <span>箱内温度</span>
                      <span font-semibold>{{ environmentTemperature }} ℃</span>
                    </div>
                  </div>
                  <div flex items-center>
                    <img :src="BatteryEnvir" />
                    <div flex flex-col class="text-[28px] color-[#fff]">
                      <span>电池温度</span>
                      <span font-semibold>{{ batteryTemperature }}℃</span>
                    </div>
                  </div>
                  <div flex items-center>
                    <img :src="MosImg" />
                    <div flex flex-col class="text-[28px] color-[#fff]">
                      <span>功率管温度</span>
                      <span font-semibold>{{ mosTemperature }}℃</span>
                    </div>
                  </div>
                </div>
                <div grid grid-cols-3 grid-rows-1 content-center justify-items-center mt-20>
                  <div
                    class="bg-gradient-to-r from-[#004986] visa-[#45aaffcc] visa-80% to-[#ffffff0c] to-100% flex items-center text-[28px] p-y-10 p-x-20"
                  >
                    <span mr-20>最高单体电压</span>
                    <div
                      class="border-1 border-[#8ADEDE] border-solid color-[#8ADEDE] p-y-5 p-x-10"
                    >
                      <span>{{ maxMonomerVoltage }}V</span>
                    </div>
                  </div>
                  <div
                    class="bg-gradient-to-r from-[#004986] visa-[#45aaffcc] visa-80% to-[#ffffff0c] to-100% flex items-center text-[28px] p-y-10 p-x-20"
                  >
                    <span mr-20>最低单体电压</span>
                    <div
                      class="border-1 border-[#FF676A] border-solid color-[#FF676A] p-y-5 p-x-10"
                    >
                      <span>{{ minMonomerVoltage }}V</span>
                    </div>
                  </div>
                  <div
                    class="bg-gradient-to-r from-[#004986] visa-[#45aaffcc] visa-80% to-[#ffffff0c] to-100% flex items-center text-[28px] p-y-10 p-x-20"
                  >
                    <span mr-20>单体电压压差</span>
                    <div
                      class="border-1 border-[#FFFFFF] border-solid color-[#FFFFFF] p-y-5 p-x-10"
                    >
                      <span>{{ voltageDifference }}V</span>
                    </div>
                  </div>
                </div>
                <div grid grid-cols-6 content-center justify-items-center mt-20>
                  <div
                    v-for="(item, index) in VoltageListData"
                    :key="index"
                    class="text-[24px] flex items-center p-10"
                  >
                    <img :src="SingleVoltageImg" mr-10 />
                    <div class="border-1 border-[#FFF] border-solid color-[#FFF] p-y-5 p-x-5">
                      <span>{{ item.value }}V</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </border-box3>
        <data-title title="基础信息" eg-title="" mt-20 />
        <border-box2 class="mix-border-box4" bg="rgba(255,255,255,0.1)" mt-20 p-10>
          <div grid grid-rows-1 grid-cols-4 content-start gap-10>
            <span>
              中控号
              <span ml-20>{{ showBasicData?.BatteryLockId }}</span>
            </span>
            <span>
              GPS信号
              <span ml-20>{{ showBasicData?.gpsStarCount }}</span>
            </span>
            <span>
              GPS信号时间
              <span ml-20>{{ showBasicData?.gpsSignalTime }}</span>
            </span>
            <span>
              GPS定位时间
              <span ml-20>{{ showBasicData?.gpsLocateTime }}</span>
            </span>
          </div>
        </border-box2>
        <border-box2 class="mix-border-box4" bg="rgba(255,255,255,0.1)" mt-20 p-10>
          <div grid grid-rows-1 grid-cols-4 content-start gap-10>
            <span>
              电池经纬度
              <span ml-20>{{ showBasicData?.longtitude }},{{ showBasicData?.latitude }}</span>
            </span>
            <span>
              电池版本
              <span ml-20>{{ showBasicData?.batteryVersion }}</span>
            </span>
            <span>
              电池运行时间
              <span ml-20>{{ showBasicData?.batteryTime }}</span>
            </span>
          </div>
        </border-box2>
        <data-title title="报警信息" eg-title="" mt-20 />
        <border-box2 class="mix-border-box4" bg="rgba(255,255,255,0.1)" mt-20>
          <div grid grid-rows-2 grid-cols-7 content-center gap-20 p-10>
            <div
              v-for="(item, index) in AlarmData"
              :key="index"
              flex
              items-center
              justify-between
              p-10
              class="text-28px"
            >
              {{ item.label }}
              <div
                class="color-[#FFF] p-y-5 p-x-15 rounded-5 ml-10"
                :style="{ background: item.color }"
              >
                <span>{{ item.value }}</span>
              </div>
            </div>
          </div>
        </border-box2>
      </div>
    </div>
    <!-- <div class="battery-info__right no-data" v-else>
      <span>暂无数据</span>
      <span>请选择电池</span>
    </div> -->
  </div>
</template>

<style scoped lang="scss">
.battery-info {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  &__left {
    width: 30%;
    height: 90%;
    padding: 100px;
    display: flex;
    flex-direction: column;
  }
  &__right {
    width: 65%;
    height: 90%;
    padding: 100px 100px 100px 0;
    display: flex;
    flex-direction: column;
  }
}
.no-data {
  justify-content: center;
  align-items: center;
  font-size: 48px;
}
.battery-info-container {
  padding: 20px 80px;
  width: 100%;
  height: 100%;
  background: linear-gradient(#132239 0%, rgba(0, 16, 41, 0.5) 51%, #132239 100%);
  display: flex;
  flex-direction: column;
}
:deep(.battery-data-header) {
  background: linear-gradient(to right, #132239 0%, #1b75ff 51%, rgba(19, 34, 57, 0.22) 100%);
  font-size: 28px;
}
:deep(.el-descriptions__body) {
  background-color: transparent;
}
:deep(.el-descriptions__body .el-descriptions__table .el-descriptions__cell) {
  font-size: 26px;
  line-height: 33px;
}
:deep(.el-descriptions__label:not(.is-bordered-label)) {
  color: #fff;
  margin-right: 26px;
}
:deep(.el-descriptions__content:not(.is-bordered-label)) {
  color: #fff;
}
:deep(.el-switch__core) {
  border: 1px solid #fff;
}
:deep(.el-switch--large .el-switch__core .el-switch__action) {
  height: 48px;
  width: 48px;
}
:deep(.el-switch--large .el-switch__core) {
  border-radius: 24px;
  height: 48px;
  min-width: 120px;
}
:deep(.el-switch--large) {
  font-size: 28px;
  height: 48px;
  line-height: 48px;
}
:deep(.el-switch--large.is-checked .el-switch__core .el-switch__action) {
  left: calc(100% - 48px);
}
:deep(.el-tag--large) {
  height: 45px;
  padding: 0 20px;
  --el-icon-size: 16px;
  --el-tag-font-size: 28px;
}
:deep(.tooltip-custom-content) {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: contain;

  > span {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 26px;
    transform: translate(-50%, -50%);
  }
  background-color: transparent;
}
:deep(.tooltip-1) {
  background-image: url(/src/assets/images/tooltip-1.png);
  background-repeat: no-repeat;
}
:deep(.tooltip-0) {
  background-image: url(/src/assets/images/tooltip-0.png);
  background-repeat: no-repeat;
}
:deep(.tooltip-2) {
  background-image: url(/src/assets/images/tooltip-2.png);
  background-repeat: no-repeat;
}
:deep(.tooltip-custom) {
  padding: 0px !important;
  border: none !important;
  width: 64px;
  height: 64px;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  background-color: transparent !important;
}
:deep(.mix-border-box4) {
  border: 3px solid;
  border-image: linear-gradient(
      90deg,
      rgba(5, 14, 32, 1),
      rgba(72, 172, 255, 1),
      rgba(5, 14, 32, 1)
    )
    2 2;
  border-left: 0;
  border-right: 0;
}
</style>
